<!DOCTYPE html><html><head><title>01-第一章 HTML常用标签</title><meta charset='utf-8'><link href='https://dn-maxiang.qbox.me/res-min/themes/marxico.css' rel='stylesheet'><style>
.note-content  {font-family: 'Helvetica Neue', Arial, 'Hiragino Sans GB', STHeiti, 'Microsoft YaHei', 'WenQuanYi Micro Hei', SimSun, Song, sans-serif;}

</style></head><body><div id='preview-contents' class='note-content'>
                        
                    



<h1 id="01-第一章-html常用标签">01-第一章 HTML常用标签</h1>

<hr>

<p></p>



<h2 id="一-html是什么-html5又是什么">一、 HTML是什么? HTML5又是什么?</h2>

<blockquote>
  <p>HTML是什么？HTML是目前最流行的网页制作语言。HTML（Hypertext Markup Language）即     超文本标记语言，是用于描述网页文档的一种标记语言。网页的本质就是超级文本标记  语言，通过结合使用其他的Web技术可以创造出功能强大的网页。</p>
</blockquote>

<hr>

<blockquote>
  <p>HTML5是近十年来Web开发标准最巨大的飞跃。和以前的版本不同，HTML 5并非仅仅用来表示    Web内容，它的新使命是将Web带入一个成熟的应用平台，在HTML 5平台上，视频，  音频，图像，动画，canvas/SVG  地图技术，以及同电脑的交互都被标准化。</p>
</blockquote>

<hr>



<h2 id="二-了解html-css-javascript">二、 了解html css javascript</h2>



<h4 id="1html-超文本-标记语言-结构hypertext-markup-language网页基础结构">(1)、HTML : “超”文本 标记“语言” ，结构（HyperText Markup Language）——网页基础，结构</h4>

<blockquote>
  <p>超文本:超级文本 <br>
  标记:<code>&lt;&gt;</code> <br>
       语言:沟通交流（打交道）的工具</p>
</blockquote>

<hr>

<blockquote>
  <p>双标签：<code>&lt;html&gt;&lt;/html&gt;</code> <code>&lt;body&gt;&lt;/body&gt;</code> <br>
      单标签：<code>&lt;meta /&gt;</code> <code>&lt;img /&gt;</code>        </p>
</blockquote>

<hr>



<h4 id="2css层叠样式表cascading-style-sheets修饰美化网页-化妆师">(2)、CSS:层叠样式表（Cascading Style Sheets）——修饰、美化网页  (化妆师)</h4>



<pre class="prettyprint with-line-number hljs-dark"><code class="hljs css"><div class="hljs-line"><span class="hljs-comment line-number">1.</span><span class="hljs-selector-id">#box</span>{
</div><div class="hljs-line"><span class="hljs-comment line-number">2.</span>    <span class="hljs-attribute">width </span>: <span class="hljs-number">200px</span>;
</div><div class="hljs-line"><span class="hljs-comment line-number">3.</span>    <span class="hljs-attribute">height </span>: <span class="hljs-number">200px</span>;
</div><div class="hljs-line"><span class="hljs-comment line-number">4.</span>    <span class="hljs-attribute">border</span>:<span class="hljs-number">8px</span> solid red;
</div><div class="hljs-line"><span class="hljs-comment line-number">5.</span>
</div><div class="hljs-line"><span class="hljs-comment line-number">6.</span>}
</div></code></pre>

<hr>



<h4 id="3js脚本语言-javascript行为增加动态交互功能-魔术师">(3)、js：脚本语言 (Javascript)（行为）——增加动态交互功能  (魔术师)</h4>



<pre class="prettyprint with-line-number hljs-dark"><code class="hljs applescript"><div class="hljs-line"><span class="hljs-comment line-number">1.</span>&lt;<span class="hljs-keyword">div</span> onclick=<span class="hljs-string">" this.style.width = '100px'; this.style.height = '500px'; "</span>&gt;&lt;/<span class="hljs-keyword">div</span>&gt;
</div></code></pre>

<p>以上css、js不是让大家马上学习，而是让大家了解，知道什么是css、js</p>

<hr>



<h2 id="三-常用标签">三 常用标签</h2>

<blockquote>
  <p><code>div</code> ——————块 <br>
  <code>img</code> ——————图片（单标签） <br>
  <code>a</code> ———————链接、下载、锚点 <br>
  <code>h1-h6</code>—————-标题 <br>
  <code>p</code> ———————段落 <br>
  <code>span</code> —————-区分样式 <br>
  <code>ul</code>——————–无序列表 <br>
  <code>ol</code>——————–有序列表    </p>
  
  <ul><li><code>li</code>————————-列表项</li>
  </ul>
  
  <p><code>dl</code> ——————-定义列表</p>
  
  <ul><li><code>dt</code> ————————-定义列表标题</li>
  <li><code>dd</code> ————————定义列表项</li>
  </ul>
  
  <p><code>i</code> ———————定义斜体文字 <br>
  <code>strong</code>————–强调（粗体） <br>
  <code>em</code> ——————强调（斜体）trong 标签和 em标签一样，用于强调文本，但它强调的程度更强一些。 <br>
  <code>br</code> ———-换行  <br>
  <code>hr</code>——————定义水平线</p>
</blockquote>

<hr>



<h2 id="四img图片标签详解">四、img图片标签详解</h2>

<blockquote>
  <p><code>&lt;img src="文件路径" alt="图片名"/&gt;</code> </p>
</blockquote>

<p>img属性 </p>

<blockquote>
  <p><code>src</code> -定义图片路径 <br>
  <code>width</code> -图片宽度,如果只给了width 没给height,height会自等比例缩放 <br>
  <code>height</code>-图片高度,如果只给了height 没给width,width会自等比例缩放 <br>
  <code>alt</code> -图片名字 给百度搜索引擎抓取使用(SEO) <br>
  <code>title</code> -标题给用户提示信息（有利于用户体验）</p>
</blockquote>

<hr>



<h2 id="五a标签">五、a标签</h2>

<p>a标签功能： <code>链接</code> | <code>下载</code> | <code>锚点</code></p>

<p><code>链接</code>: <code>href='url'</code> 中url是一个网页地址</p>

<blockquote>
  <p>相对 URL - 指向站点内的某个文件（href=”./index.html”） <br>
    绝对 URL - 指向另一个站点（比如 href=”http://www.baidu.com”）</p>
</blockquote>

<p><code>下载</code>：href=’url’中url链接地址一个软件就会下载 <br>
<code>锚点</code>：href=’#ID名’ 锚点</p>

<hr>

<p>target 链接打开方式 </p>

<ul><li>_blank  新窗口（空白页面）</li>
<li>_self     当前窗口</li>
</ul>

<hr>

<p><code>&lt;base target="_blank" /&gt;</code>  定义默认网页打开方式</p>

<hr>



<h2 id="六路径">六、路径</h2>

<blockquote>
  <p>相对路径 —相对于当前 文档位置出发（推荐使用） <br>
  绝对路径—路径名称不能出现中文</p>
  
  <ul><li>本地绝对路径：从盘符出发 <br>
  <ul>
  <li>D:\a\b\c\d\6.jpg</li></ul></li>
  <li>网络绝对路径：从域名出发 <br>
  <ul>
  <li><a href="https://www.baidu.com/img/bd_logo1.png" target="_blank">https://www.baidu.com/img/bd_logo1.png</a></li></ul></li>
  </ul>
</blockquote>

<p>注意=&gt;需要跳到上一级要<code>../</code> 如果要跳两级<code>../../</code></p>

<hr>



<h2 id="七代码seo方法">七、代码seo方法：</h2>

<p>SEO : 搜索引擎优化</p>

<blockquote>
  <p>一、页面标签语义化； <br>
  二、使用对SEO有利的标签：          h1/h2/h3/strong/em…… <br>
  三、提高页面关键词密度；</p>
</blockquote></div></body></html>